<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }
        .clock {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 50px auto 0;
            background: url("imgs/clock.jpg") no-repeat;
        }
        .hh, .mm, .ss{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url("imgs/hour.png") no-repeat center;
        }
        .mm {
            background-image: url("imgs/minute.png");
            transform: rotate(0deg);
        }
        .ss {
            background-image: url("imgs/second.png");
            transform: rotate(0deg);
        }

    </style>
</head>
<body>
    <div class="clock">
        <div class="hh"></div>
        <div class="mm"></div>
        <div class="ss"></div>
    </div>
    <script>
        const second = document.querySelector('.ss')
        const min = document.querySelector('.mm')
        const hour = document.querySelector('.hh')
        let secondDeg = 0, minDeg = 0, hourDeg = 0
        const everyDeg = 360 / 60
        setInterval(function(){
            secondDeg += everyDeg
            minDeg += (everyDeg * 1 / 60)
            if (secondDeg === 360) {
                secondDeg = 0
                hourDeg += (everyDeg * 1 / 60)
            }
            if (minDeg == 360) {
                minDeg = 0
            }
            if (hourDeg == 360) {
                hourDeg = 0
            }
            second.style.transform = `rotate(${secondDeg}deg)`
            min.style.transform = `rotate(${minDeg}deg)`
            hour.style.transform = `rotate(${hourDeg}deg)`

        }, 1000)

    </script>
</body>
</html>